<template>
	<view class="">
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="m-2">
				最多添加5张商品图片
			</view>
			<view class="position-relative">
				<image-cropper :src="tempPath" @confirm="confirm"></image-cropper>
			</view>
			<view class="m-2 pre-box" v-if="!showUploadList">
				<view v-if="index<5" class="pre-item  position-relative rounded-20" v-for="(item, index) in tempFilePath" :key="index">
					<view class="position-absolute top-0 right-0 close_icon">
						<icon type="clear" size="22" @click="close_icon(item)"  class="icon_img" />
					</view>
					<image class="pre-item-image rounded-20" :src="item.url||item" @click="previewImages(tempFilePath,index)" mode=""></image>
				</view>
				<view class="addTu d-flex flex-column j-center a-center rounded-20" @click="unloadImg">
					<image src="../../static/images/goods/icon_gray_camera.png" mode="aspectFit" class="icon_gray_camera"></image>
					<view class="">添加图片</view>
				</view>		
			</view>
			<u-modal v-model="close_show" title="提示" show-title="false"  show-confirm-button show-cancel-button cancel-color confirm-color @confirm="confirm_close">
				<view class="py-3">
					<view class="text-center">确定要删除该图片吗?</view>
				</view>
			</u-modal>
			<u-toast ref="uToast"/>
		</view>
	</view>
</template>

<script>
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	export default {
			components: {
				ImageCropper,
			},
			data() {
				return {
					tempFilePath:[], // 图片列表
					cropFilePath:"", // 裁切图片
					tempPath:"", // 裁切
					
					goods_id:'', // 商品ID
					dictionaries:'', // 字典
					close_show:false,
					item_img:"", // 图片信息
					u_loadmore:true, // 加载中
				}
			},
			
			methods:{
				showToast(e) {
					this.$refs.uToast.show({
						title: e,
						type: 'default',
					})
				},
				// 预览
				previewImages(e,i){
					let urls=this.tempFilePath.map(v=>{
						return v.url
					})
					console.log(urls)
					uni.previewImage({
						current: i,
					    urls: urls // 图片路径必须是一个数组
					});
				},
				// 我的相册
				unloadImg(){
					var that=this
					if(that.tempFilePath.length>=5){
						let arr='最多添加5张商品图片'
						this.showToast(arr) 
					}else{
						uni.chooseImage({
						    count:5,
						    sizeType:["original","compressed"],
							sourceType: ['album'], //从相册选择
						    success:(res)=>{
								uni.showToast({
						                title: "上传中...",
						                icon: "loading",
						                mask: true,
						                duration: 1000,
						        });
								this.tempFilePath=res.tempFilePaths
								this.tempFilePath.forEach(v=>{
									this.uploadFile(v)
								})
							}
						});
					}
				},
				uploadFile(filePath){
					uni.uploadFile({
						url:`${this.localConfig.web_Url}v2/store/medialibrary/image/temp/upload`,
						filePath:filePath,
						name:"tempimage",
						formData:{
							'token':uni.getStorageSync("token")
						},
						success: (res) => {
							let fileData=JSON.parse(res.data)
							this.dictionaries=fileData.data	
							this.$H.post("admin/goods/gallery/add",{
								goods_id:this.goods_id,
								image:this.dictionaries,
							}).then(res=>{
								this.$H.post('admin/merchant/goods/detail',{
									goods_id:this.goods_id
								}).then(res=>{
									this.tempFilePath=res.data.pictures
								})
							})
						}
					})
				},
				// 裁剪图片
				// confirm(e) {
				//     this.cropFilePath = e.detail.tempFilePath
				// },
				
				toJSON(){
					return this
				},
				// 编辑图片 删除
				close_icon(item){
					this.close_show=true
					this.item_img=item
					console.log(item,this.tempFilePath)
				},
				// 提示
				confirm_close(){
					this.$H.post("admin/goods/gallery/delete",{
						goods_id:this.goods_id,
						img_id:this.item_img.img_id
					}).then(res=>{
						this.$H.post('admin/merchant/goods/detail',{
							goods_id:this.goods_id
						}).then(res=>{
							this.tempFilePath=res.data.pictures
						})
						console.log(res)
					})
				}
			},
			onLoad(e) {
				console.log(e)
				this.goods_id=e.goods_id
				this.$H.post('admin/merchant/goods/detail',{
					goods_id:this.goods_id
				}).then(res=>{
					this.tempFilePath=res.data.pictures
					this.u_loadmore=false 
				})
			}
		}
</script>

<style>
	.slot-btn {
		width: 341rpx;
		height: 280rpx;;
		display: flex;
		justify-content: center;
		align-items: center;
		background:#FFFFFF;
		border-radius: 20rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.pre-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.pre-item {
		flex: 0 0 48.5%;
		border-radius: 10rpx;
		height: 344.34upx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.pre-item-image {
		width: 100%;
		height: 100%;
	}
	.icon_gray_camera{
		width: 130upx;
		height: 130upx;
	}
	.addTu{
		flex: 0 0 48.5%;
		height: 344.34upx;
		background-color: #FFFFFF;
	}
	.close_icon{
		z-index: 11;
	}
	
	.icon_img{
		position: relative;
		top: -13upx;
		right: -13upx;
		z-index: 111;
	}
</style>
